<template>
	<view>
		<!-- 滑动组件 -->
		<u-tabs :list="list" :is-scroll="isScroll" :current="current" @change="change" :active-color="activeColor"
			:inactive-color="textColor" :bg-color="bgColr" :height="height" :bar-width="barWidth" :name="name"
			:font-size="fontSize" :gutter='gutter'>
		</u-tabs>
	</view>
</template>

<script>
	export default {
		name: "q-tabs",
		props: {
			// 组件list
			list: {
				type: Array,
			},
			//是否可滑动
			isScroll: {
				type: Boolean,
				default: false,
			},
			//当前在第几个
			currents: {
				type: [Number, String],
				default: 0,
			},
			//tabs文字颜色
			textColor: {
				type: String,
				default: "#000000",
			},
			//滑块和激活tab文字的颜色
			activeColor: {
				type: String,
				default: "#167148",
			},
			//背景色
			bgColr: {
				type: String,
				default: "#fff",
			},
			//高度
			height: {
				type: Number,
				default: 100,
			},
			//滑块宽度
			barWidth: {
				type: Number,
				default: 100,
			},
			gutter: {
				type: Number,
				default: 40,
			},
			name: {
				type: String,
				default: "label",
			},
			fontSize: {
				type: [String, Number],
				default: 30
			}
		},
		data() {
			return {
				current: 0,
			};
		},
		// 查看传递数据状态
		created() {
			this.current = this.currents
		},
		methods: {
			change(index) {
				this.current = index
				let ret = this.list[index].label
				let val = this.list[index].value
				this.$emit('change', ret, val, index)
			},
		}
	}
</script>

<style>

</style>